<template>
  <div class="classes-content">
    <van-cell-group>
      <div v-for="(item,index) in items" :key="index" class="cell">
        <span>{{ item.className }}</span>
        <span style="color:red" @click="Suk_del(index)">删除</span>
      </div>
    </van-cell-group>
    <div class="add" @click="Suk_add">
      <van-icon name="add-o" color="#ffa500" size="0.6rem"/>
      <p>新增</p>
    </div>
    <van-dialog v-model="show" show-cancel-button :before-close="beforeClose">
      <van-field v-model="username" label="商品分类" placeholder="请输入商品名"/>
      <!-- <van-field
    v-model="password"
    type="password"
    label="密码"
    placeholder="请输入密码"
      />-->
    </van-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      username: "",
      //   password: '',
      items: [
      ]
    };
  },
  beforeCreate: function() {
    //创建前
  },
  activated() {
    this.Suk_getlist();
  },
  created: function() {
    this.Suk_getlist();
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    Suk_del(index) {
      let that = this;
      // console.log(that.items[index].classId)

      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        classId:that.items[index].classId
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/classs/deleteClass", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.Suk_getlist()
              that.$toast.success({
                message:'删除成功！'
              })
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    // 关闭前的回调
    beforeClose(action, done) {
      if (action === "confirm") {
        let that = this;
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          className: that.username,
          dinId: localStorage.getItem("myshopid")
        };
        console.log(Sukdata);
        that.axios
          .post(
            that.baseUrl + "/classs/inserClass",
            that.Qs.stringify(Sukdata),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                that.Suk_getlist();
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
        done();
      } else {
        done();
      }
    },
    Suk_getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        dinId: localStorage.getItem("myshopid")
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/classs/queryClass", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data, "list");
              that.items = res.data.data;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    Suk_add(e) {
      this.show = true;
      console.log(e);
    }
  }
};
</script>
<style lang="scss" scoped>
.classes-content {
  font-size: 0.3rem;
}

.cell {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  font-size: 0.4rem;
  height: 1.3rem;
  line-height: 1.3rem;
  border-bottom: 1px solid #f0f0f0;
}

p {
  height: 1.3rem;
  line-height: 1.3rem;
  font-size: 0.5rem;
  text-align: center;
  margin-left: 0.1rem;
  color: #ffa500;
}

.add {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
